<!DOCTYPE html>
<html lang="en" xmlns:http="http://www.w3.org/1999/xhtml" xmlns: xmlns:>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"
    />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>福山</title>
    <link rel="stylesheet" type="text/css" href="../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../css/element/elemet-ui.css" />
    <link rel="stylesheet" type="text/css" href="../css/rem.css" />
    <link rel="stylesheet" href="../css/repeat.css">
    <link rel="stylesheet" href="../css/fonts/iconfont.css">
    <link rel="stylesheet" href="../js/jquery-range/jquery.range.css">
    <!-- <link href="../assets/css/GA.css" type="text/css" rel="stylesheet"> -->
    <style type="text/css">
        #app {
            width: 100vw;
            height: 100vh;
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            background-image: url('../image/bigscreen-bj.png');
            background-size: 100%;
            background-repeat: no-repeat;
        }

        .el-tree-node__content:hover {
            background-color: rgba(0, 0, 0, .8);
        }

        .el-input__inner {
            background-color: #00295C !important;
            border: 1px solid #056DAD !important;
            color: rgb(0, 174, 244) !important;
        }

        /* 定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸 */

        .sroll-2::-webkit-scrollbar {
            width: 0px;
            height: 0px;
            background-color: transparent;
        }

        /* 定义滚动条轨道 内阴影+圆角 */

        .sroll-2::-webkit-scrollbar-track {
            /*-webkit-box-shadow: inset 0 0 6px #fff;*/
            border-radius: 1px;
            background-color: #0051AA;
        }

        /* 定义滑块 内阴影+圆角 */

        .sroll-2::-webkit-scrollbar-thumb {
            border-radius: 1px;
            /*-webkit-box-shadow: inset 0 0 6px #00a7ec;*/
            background-color: #0051AA;
        }

        .tabUl {
            float: left;
            margin: 18px 0 0 30rem;
            /* overflow: hidden; */
        }

        .tabUl li {
            float: left;
            padding: 0px 20px;
            height: 55px;
            line-height: 55px;
            color: #79afff;
            font-size: 16px;
            cursor: pointer;
            position: relative
        }

        .tabUl li.li_active {
            height: 77px;
            font-size: 18px;
            line-height: 80px;
            border-bottom: 3px solid #0070ff;
        }

        .tabUl ul {
            width: 100%;
            height: auto;
            overflow: hidden;
            position: absolute;
            left: 0
        }

        .tabUl>li:hover {
            background: #2471e4;
            color: #fff;
            border-top-right-radius: 5px;
            border-top-left-radius: 5px;
            -webkit-border-top-left-radius: 5px;
            -webkit-border-top-left-radius: 5px;
        }

        .tabUl>li:hover ul {
            display: block
        }

        .tabUl>li ul {
            display: none;
            background: #2471e4;
            color: #fff;
            border-bottom-right-radius: 5px;
            border-bottom-left-radius: 5px;
            -webkit-border-bottom-left-radius: 5px;
            -webkit-border-bottom-left-radius: 5px;
        }

        .tabUl ul li {
            height: 40px;
            line-height: 40px;
            padding: 0;
            width: 100%;
            text-align: center;
            color: #fff
        }

        .tabUl ul li:hover {
            background: #fff;
            color: #666666
        }

        .ticket-content {
            width: 97vw;
            height: 83vh;
            margin: 0 auto;
            border-radius: 5px;
            -webkit-border-radius: 5px;
        }

        .ticket-content>div {
            width: 20%;
            height: 100%;
            background: #fff;
            float: left;
            border-radius: 5px;
        }

        .ticket-content .ticket-content-right {
            width: 79%;
            margin-left: 1%
        }

        .ticket-content .left-content {
            width: 17rem;
            height: 13rem;
            border: 1px solid #e9e9e9;
            margin: 1rem auto 0;
            padding: 1rem;
        }

        .ticket-content .left-content button,
        .ticket-content .left-content label {
            display: block;
            height: 40px;
            width: 120px;
            margin: 0 auto 10px;
            background: #0090f4;
            color: #fff;
            border: 0;
            border-radius: 5px;
            line-height: 40px;
            text-align: center
        }

        .ticket-content .left-content button:hover,
        .ticket-content .left-content label:hover {
            cursor: pointer
        }

        .ticket-content .left-content input[type=file] {
            display: none;
        }

        .ticket-content .left-content button i {
            padding-right: 5px
        }

        .ticket-content .left-content form button:nth-child(3) {
            background: #ff7e00
        }

        .ticket-content .left-content form button:nth-child(4) {
            background: none;
            color: #0090f4
        }

        .ticket-content .left-content form>div {
            width: 236px;
            color: #969696;
            margin: 0 auto;
        }

        .ticket-content-right .operation {
            width: 100%;
            height: 1px;
            background: #eeeeee;
            position: relative;
            margin-top: 3rem
        }

        .ticket-content-right .operation button {
            border: 0;
            background: #eee;
            width: 160px;
            height: 50px;
            color: #696969;
            top: 50%;
            margin-top: -25px;
            left: 100px;
            position: absolute;
            border-radius: 5px;
            font-size: 16px;
        }

        .ticket-content-right .operation button.active {
            color: #fff;
            background: #0070ff
        }

        .ticket-content-right .operation button:nth-child(2) {
            left: 300px;
        }

        .ticket-content-right .operation button:nth-child(3) {
            left: 500px;
        }

        .ticket-content-right .operation button:nth-child(4) {
            left: 700px;
        }

        .ticket-content-right .table-content {
            width: 20rem;
            height: auto;
            margin: 2.5rem 0 0 100px;
            border-right: 1px solid #cccccc;
            position: relative
        }
        .ticket-content-right .table-content::after, .ticket-content-right .table-content::before{
            content: '';
            display: block;
            width: 40px;
            height: 40px;
            border-right: 1px solid #cccccc;
            border-bottom: 1px solid #cccccc;
            transform: rotate(-45deg);
            position: absolute;
            right: -21px;
            top: 50%;
            margin-top:-20px;
            background: #fff
        }
        .ticket-content-right .table-content::before{
            right: -42px;
        }
        .ticket-content-right .table-content  .table-div {
            margin-bottom: .5rem
        }

        .ticket-content-right .table-content  .table-div h5 {
            padding-left: 10px;
            color: #696969
        }

        .ticket-content-right .table-content td input[type=checkbox] {
            display: none
        }

        .ticket-content-right .table-content td label {
            display: inline-block;
            width: 12px;
            height: 12px;
            border: 1px solid #696969;
            border-radius: 3px;
            vertical-align: -1px;
        }

        .ticket-content-right .table-content td label::after {
            display: block;
            content: '';
            width: 8px;
            height: 5px;
            border-left: 2px solid #0070ff;
            border-bottom: 2px solid #0070ff;
            transform: rotate(-45deg);
            margin: 1px 0 0 1px;
            opacity: 0;
        }

        .ticket-content-right .table-content td input[type=checkbox]:checked+label {
            background: #0070ff;
            border-color: #0070ff
        }

        .ticket-content-right .table-content td input[type=checkbox]:checked+label::after {
            opacity: 1;
            border-left: 2px solid #fff;
            border-bottom: 2px solid #fff;
        }

        .ticket-content-right .table-content table {
            width: 90%;
            border: 1px solid #cccccc;
            border-collapse: collapse;
            margin-top: .5rem
        }

        .ticket-content-right .table-content table td {
            border-bottom: 1px solid #cccccc;
            padding: 10px 0 10px 10px;
            vertical-align: middle;
            color: #696969
        }

        .ticket-content-right .table-content table tr:first-child td {
            border-bottom: 2px solid #ff5959;
        }

        .ticket-content-right .table-content table tr:nth-child(even) {
            background: #f6f6f6
        }
        .ticket-content-right .table-content .table-contrast{
            position: absolute;
            right: -160px;
            top:50%;
            transform: translateY(-50%)
        }
        .ticket-content-right .table-content table td.active-color{
            color: #ff5959
        }
    </style>
</head>

<body class="bighome2">
    <div id="app" v-cloak>
        <div style="width: 100%;height: 3.8rem;background-image: url('../image/top-logo.png'); background-size: 100%;background-position: center;background-repeat: no-repeat;">
            <ul class="tabUl">
                <li :class="{'li_active':activeIndex === index}" v-for="(item, index) in menuList" :key="index" @click="routerGo(item)">{{item.name}}
                    <ul v-if="item.childList">
                        <li v-for="(child,childIndex) in item.childList" :key="childIndex">{{child.name}}</li>
                    </ul>
                </li>
            </ul>
        </div>
        <div style="width: 100%;height: 3.5rem;display: flex;flex-direction: row;flex-wrap: nowrap;justify-content: left;align-items: center;background-color: #0A1339;">
            <div style="width: 0.3rem;height: 0.3rem;background-color: #0162A6;border-radius: 0.15rem;margin-left: 2rem;margin-right: 0.6rem">
            </div>
            <div style="font-size:0.8rem;font-family:MicrosoftYaHei;color:#0162A6;line-height:3.5rem;">智能作战系统 > 分析工具 ></div>
            <div style="font-size:0.8rem;font-family:MicrosoftYaHei;color:#47CDFE;line-height:3.5rem;">数据对比</div>
            <!-- <el-button type="primary" size="mini" @click="window.location.href='bigHome.html'" style="position:absolute;right:5rem;">
            重点人员管控
        </el-button> -->
        </div>
        <div class="ticket-content">
            <div class="ticket-content-left">
                <div class="left-content">
                    <form action="" method="POST" @submit.prevent>
                        <label for="fileInput">
                            <i class="icon iconfont icon-icon-4"></i>上传文件</label>
                        <input type="file" accept=".xls,.xlsx" id="fileInput" @change="uploadFile($event)" />
                        <button>
                            <i class="icon iconfont icon-yuezhonghuyi"></i>开始对比</button>
                        <button>对比结果
                            <i class="icon iconfont icon-shuangjiantou"></i>
                        </button>
                        <div>
                            <h5>提示：</h5>
                            <p>1、上传大小限制20mb;</p>
                            <p>2、上传格式：03及更高版本excel。</p>
                        </div>
                    </form>

                </div>
            </div>
            <div class="ticket-content-right">
                <div class="operation">
                    <button class="active">取交集</button>
                    <button>取并集</button>
                    <button>取唯一</button>
                    <button>取重</button>
                </div>
                <div class="table-content">
                    <div class="table-div">
                        <h5>表一：</h5>
                        <table>
                            <colgroup>
                                <col width="80">
                                <col width="120">
                            </colgroup>
                            <tr>
                                <td>ID
                                    <input type="checkbox" id="table-one">
                                    <label for="table-one"></label>
                                </td>
                                <td>
                                    姓名
                                </td>
                            </tr>
                            <tr>
                                <td>A01
                                </td>
                                <td>
                                    谢家名
                                </td>
                            </tr>
                            <tr>
                                <td>A01
                                </td>
                                <td>
                                    谢家名
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div class="table-div">
                        <h5>表二：</h5>
                        <table>
                            <colgroup>
                                <col width="80">
                                <col width="120">
                            </colgroup>
                            <tr>
                                <td>ID
                                    <input type="checkbox" id="table-two">
                                    <label for="table-two"></label>
                                </td>
                                <td>
                                    籍贯
                                </td>
                            </tr>
                            <tr>
                                <td>A01
                                </td>
                                <td>
                                    成都
                                </td>
                            </tr>
                            <tr>
                                <td>A01
                                </td>
                                <td>
                                    成都
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div class="table-div">
                        <h5>表三：</h5>
                        <table>
                            <colgroup>
                                <col width="80">
                                <col width="120">
                            </colgroup>
                            <tr>
                                <td>ID
                                    <input type="checkbox" id="table-tree">
                                    <label for="table-tree"></label>
                                </td>
                                <td>
                                    手机号码
                                </td>
                            </tr>
                            <tr>
                                <td>A01
                                </td>
                                <td>
                                    13866666666
                                </td>
                            </tr>
                            <tr>
                                <td>A01
                                </td>
                                <td>
                                    13866666666
                                </td>
                            </tr>
                            <tr>
                                <td>A01
                                </td>
                                <td>
                                    13866666666
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div class="table-div table-contrast">
                            <table>
                                <colgroup>
                                    <col width="80">
                                    <col width="120">
                                </colgroup>
                                <tr>
                                    <td>ID
                                       
                                    </td>
                                </tr>
                                <tr>
                                    <td class="active-color">A01
                                    </td>
                                </tr>
                                <tr>
                                        <td class="active-color">A01
                                        </td>
                                    </tr>
                            </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 引入组件库 -->
    <script type="text/javascript" src="../js/vue/vue.js"></script>
    <script src="../js/jquery-3.0.0.min.js.js"></script>
    <script type="text/javascript" src="../js/element/element.js"></script>
    <script type="text/javascript" src="../js/swiper/swiper-4.1.6.min.js"></script>
    <!--<script src="https://cdn.jsdelivr.net/npm/vue-awesome-swiper@3.1.2/dist/vue-awesome-swiper.js"></script>-->
    <script type="text/javascript" src="../js/urls.js"></script>
    <script src="../js/axios.min.js"></script>
    <script type="text/javascript" src="../js/utils.js"></script>
    <!-- <script src="../js/map/baiduInterface.js"></script> -->
    <script src="../js/mapComponent.js"></script>
    <script src="../js/areaData.js"></script>
    <script src="../js/echarts.min.js"></script>
    <script src="../js/china.js"></script>
    <script src="../js/geoCoordMap.js"></script>
    <script src="../js/jquery-range/jquery.range-min.js"></script>

    <script type="text/javascript">
        var vm;
        vm = new Vue({
            el: '#app',
            data: {
                menuList: [{
                        name: '地界防控',
                        path: '#'
                    },
                    {
                        name: '分析工具',
                        path: '#',
                        childList: [{
                            name: '数据对比',
                            path: '#'
                        }, {
                            name: '话单分析',
                            path: '#'
                        }]
                    },
                    {
                        name: '轨迹分析',
                        path: '#'
                    },
                    {
                        name: '人员维稳',
                        path: '#'
                    },
                    {
                        name: '个人全息档案',
                        path: '#'
                    },
                    {
                        name: '安全态势',
                        path: '#'
                    }
                ],
                activeIndex: -1,
                value1: '',
                value2: '',
                value3: '',
                fileName: '',
                tableData: [{
                    date: '15738592810',
                    name: '35',
                    address: '张三、李四'
                }, {
                    date: '15738592810',
                    name: '35',
                    address: '张三、李四'
                }, {
                    date: '15738592810',
                    name: '35',
                    address: '张三、李四'
                }, {
                    date: '15738592810',
                    name: '35',
                    address: '张三、李四'
                }]
            },
            created: function () {},
            mounted: function () {},
            methods: {
                routerGo(item) {
                    window.location.href = item.path
                },
                uploadFile: function (ev) { //上传文件

                },
            },
        })
    </script>
</body>

</html>